<template>
  <div>
	  <myheader></myheader>

	

	<section class="featured-block text-center">
		<div class="container">
			
			<div>
				<Breadcrumb :datas="datas"></Breadcrumb>
			</div>

			<div>
				<table>
				<tr>
					<td>
						用户名：
					</td>
					<td>
						<input type="text" v-model="username" placeholder="输入用户名">
					</td>
				</tr>
				<tr>
					<td>
						密码：
					</td>
					<td>
						<input type="password" v-model="password" >
					</td>

				</tr>

				<tr>
                    <td style="padding:5px">验证码：</td>
                    <td style="padding:5px">
                        <input type="text" v-model="code">
                    </td>
                </tr>
				 <tr>
                    <td style="padding:5px">
                        
                    </td>
                    <td style="padding:5px">
                        <img id="mycode" @click="changeimg" :src="src" />
                    </td>
                </tr>

				<tr>
					<td></td>
					<td><Button color="green" @click="submit">提交</Button></td>
				</tr>
				</table>
			</div>



		</div>
	</section>
	

	
	
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
  </div>
  
</template>


 
<script>
//导入组件
import myheader from './myheader.vue'

export default {
  data () {
    return {
	  msg: "这是一个变量",
	  //面包屑导航
	  datas:[{title:'首页',route:{name:'index'}},{title:'注册页面'}],
	  username:"",
	  password:"",
	  code:"",
	  src:"http://127.0.0.1:8000/code/"
	  
    }
  },
  //注册组件标签
  components:{
	  myheader
  },
  mounted:function(){

   
  
},
  methods:{
	  //刷新验证码
        changeimg:function(){

            //随机字符串
            var num = Math.ceil(Math.random()*10);
            //赋值地址
            this.src = this.src + "?code=" + num;

        },
	  //提交注册
        submit:function(){
            if(this.username == ""){
                this.$Message('用户名不能为空')
                return false;
            }

            if(this.password == ""){
                this.$Message('密码不能为空')
                return false;
            }
            if(this.code == ""){
                this.$Message('验证码不能为空')
                return false
            }

            //发送请求
            this.axios.get('http://127.0.0.1:8000/register/',{params:{username:this.username,
            password:this.password,code:this.code}}).then((result) =>{
                console.log(result);
                this.$Message(result.data.message)  


            })
        }
	  


     
  }
}


</script>
 
<style>
/* 样式 */
td {
	padding:10px;
}


</style>